<!-- 奖牌榜 -->
<template>
  <div>
    <div class="report_box">
      <!-- 导出 -->
      <el-row :gutter="20" class="gl_my_15">
        <el-col><h3 class="gl_my_5">报表</h3></el-col>
      </el-row>
      <el-row :gutter="20" class="gl_my_15">
        <el-col>
          <span style="font-size: 14px;">按项目级别选择：</span>
          <el-select v-model="rankCategoryIds" class="gl_mr_10" style="width: 300px" size="mini" collapse-tags multiple filterable clearable placeholder="请选择项目" @change="changeSelectRank">
            <el-checkbox v-model="checkedRank" @change="selectAllRank">全部</el-checkbox>
            <el-option v-for="item in categoryData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-button :loading="downloadRankLoading" type="primary" size="mini" @click="downloadPDF('RankList')">名次公告</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="gl_my_15">
        <el-col>
          <span style="font-size: 14px;">按项目级别选择：</span>
          <el-select v-model="pointCategoryIds" class="gl_mr_10" style="width: 300px" size="mini" collapse-tags multiple filterable clearable placeholder="请选择项目" @change="changeSelect">
            <el-checkbox v-model="checked" @change="selectAll">全部</el-checkbox>
            <el-option v-for="item in categoryData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-button :loading="downloadPointLoading" type="warning" size="mini" @click="downloadPDF('MedalStanding')">积分榜导出</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="gl_my_15">
        <el-col>
          <el-button :loading="downloadResultLoading" type="primary" size="mini" @click="downLoadResult('ResultList')">生成项目EXCEL成绩列表</el-button>
          <el-button :loading="downloadRankPointLoading" type="success" size="mini" @click="downLoadPoint('RankPrint')">生成名次积分表</el-button>
          <el-button :loading="downloadAwardListLoading" type="primary" size="mini" @click="downLoadAwardList('AwardList')">导出颁奖表</el-button>
          <el-button :loading="downloadRankingLoading" type="success" size="mini" @click="downLoadRanking('AwardList')">全部名次表</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gl_searchBox gl_mt_15">
      <!-- table的选择条件 -->
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :md="8" :lg="6">
          <p>积分方式选择</p>
          <el-radio-group v-model="pointTypeCode" @change="putPointType">
            <el-radio v-for="(item, index) in pointType" :key="index" :label="item.code">{{ item.value }}</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="4" align="right">
          <el-button :loading="refreshLoading" style="margin-top: 7px" type="primary" size="mini" @click="refreshPoints()">积分刷新</el-button>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeName" type="card" class="gl_mt_15" @tab-click="handleClick">
      <el-tab-pane label="团体积分排名" name="teamRank">
        <team-rank v-if="is1" :point-type-code="pointTypeCode" :refresh="refresh" />
      </el-tab-pane>
      <el-tab-pane label="个人积分排名" name="peopleRank">
        <people-rank v-if="is2" :point-type-code="pointTypeCode" :refresh="refresh" />
      </el-tab-pane>
      <el-tab-pane label="教练积分排名" name="coachRank">
        <coach-rank v-if="is3" :point-type-code="pointTypeCode" :refresh="refresh" />
      </el-tab-pane>
      <el-tab-pane label="领队积分排名" name="leaderRank">
        <leader-rank v-if="is4" :point-type-code="pointTypeCode" :refresh="refresh" />
      </el-tab-pane>
      <el-tab-pane label="区域排名" name="regionRank">
        <region-rank v-if="is5" :point-type-code="pointTypeCode" :refresh="refresh" />
      </el-tab-pane>
      <el-tab-pane label="项目排名" name="objectRank">
        <object-rank />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import teamRank from './teamRank';
import objectRank from './objectRank';
import regionRank from './regionRank';
import peopleRank from './peopleRank';
import coachRank from './coachRank';
import leaderRank from './leaderRank';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { mapState, mapActions } from 'vuex';
import {
  api_GET_EventsManagementCategory,
  api_GET_EventsManagementEventResultPointTypeCompetitionId,
  api_PUT_EventsManagementEventResultPointTypeCompetitionId,
  api_POST_EventsManagementEventResultClearPointCacheCompetitionId // 积分刷新
} from '@/extend/api/gameswaggerApi/app';
import { Api_GET_EventsManagementCategoryQO } from '@/lib/form/game/swaggerForm';
export default {
  name: 'GameMedal',
  components: { teamRank, peopleRank, coachRank, leaderRank, objectRank, regionRank },
  data() {
    return {
      activeName: 'teamRank',
      activeNameCopy: '',
      is1: true,
      is2: false,
      is3: false,
      is4: false,
      is5: false,
      gameId: '',
      pointTypeCode: '', // 积分方式
      pointType: [],
      Api_GET_EventsManagementCategoryQO: new Api_GET_EventsManagementCategoryQO(),
      categoryData: [],
      checked: false,
      checkedRank: false,
      rankCategoryIds: [],
      pointCategoryIds: [],
      refresh: '',
      refreshLoading: false, // 刷新积分
      downloadRankLoading: false,
      downloadPointLoading: false,
      downloadResultLoading: false,
      downloadRankPointLoading: false,
      downloadAwardListLoading: false,
      downloadRankingLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict().then(res => {
      this.pointType = res.pointType;
    });
    this.getCategory();
    this.getPointType();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    handleClick(tab) {
      if (tab.name === 'teamRank') {
        this.is1 = true;
        this.is2 = false;
        this.is3 = false;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'peopleRank') {
        this.is1 = false;
        this.is2 = true;
        this.is3 = false;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'coachRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = true;
        this.is4 = false;
        this.is5 = false;
      } else if (tab.name === 'leaderRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = false;
        this.is4 = true;
        this.is5 = false;
      } else if (tab.name === 'regionRank') {
        this.is1 = false;
        this.is2 = false;
        this.is3 = false;
        this.is4 = false;
        this.is5 = true;
      }
    },
    // 获取项目级别列表
    getCategory() {
      api_GET_EventsManagementCategory({ CompetitionId: this.gameId }).then(res => {
        this.categoryData = res.items || [];
      }, () => {
        this.$message({ type: 'error', message: '获取项目列表失败！' });
      });
    },
    // 获取当前积分类型
    getPointType() {
      var that = this;
      api_GET_EventsManagementEventResultPointTypeCompetitionId(this.gameId).then(res => {
        that.pointTypeCode = res || 'Tradition';
        if (!res) {
          that.putPointType();
        }
      }).catch(error => {
        if (error.error.code === '当前赛事尚未设置比赛配置信息，请先设置配置信息') {
          that.$message({ type: 'warning', message: error.error.code });
        } else {
          that.$message({ type: 'error', message: error.error && error.error.message || '获取积分方式失败！' });
        }
      });
    },
    // 设置积分类型
    putPointType() {
      var that = this;
      const form = {
        pointTypeCode: this.pointTypeCode
      };
      api_PUT_EventsManagementEventResultPointTypeCompetitionId(this.gameId, form).then(res => {}).catch(error => {
        that.$message({ type: 'error', message: error.error && error.error.message || '设置积分方式失败！' });
      });
    },
    // 积分榜下拉框的全选
    selectAll() {
      this.pointCategoryIds = [];
      if (this.checked && this.categoryData.length > 0) {
        this.categoryData.map((item) => {
          this.pointCategoryIds.push(item.id);
        });
      } else {
        this.pointCategoryIds = [];
      }
    },
    changeSelect(val) {
      if (val.length === this.categoryData.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 名次公告下拉框的全选
    selectAllRank() {
      this.rankCategoryIds = [];
      if (this.checkedRank && this.categoryData.length > 0) {
        this.categoryData.map((item) => {
          this.rankCategoryIds.push(item.id);
        });
      } else {
        this.rankCategoryIds = [];
      }
    },
    changeSelectRank(val) {
      if (val.length === this.categoryData.length) {
        this.checkedRank = true;
      } else {
        this.checkedRank = false;
      }
    },
    // 刷新积分
    refreshPoints() {
      var that = this;
      that.refreshLoading = true;
      const copy = that.activeName;
      if (that.activeNameCopy === that.activeName) {
        that.refresh = '';
      }
      api_POST_EventsManagementEventResultClearPointCacheCompetitionId(that.gameId).then(res => {
        that.refreshLoading = false;
        that.refresh = copy;
        that.activeNameCopy = copy;
      }).catch(error => {
        that.refreshLoading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '积分刷新失败！' });
      });
    },
    downloadPDF(code) {
      var that = this;
      if (code === 'MedalStanding') {
        if (this.pointCategoryIds.length > 0) {
          this.downloadPointLoading = true;
          let pointCategoryId = '';
          for (let i = 0; i < this.pointCategoryIds.length; i++) {
            const item = this.pointCategoryIds[i];
            pointCategoryId = pointCategoryId + item;
            if (i !== this.pointCategoryIds.length - 1) {
              pointCategoryId = pointCategoryId + ',';
            }
          }
          const tempUrl = `/api/app/events-management/report`;
          const fileName = '积分榜' + '.pdf';
          api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: code, Format: 'PDF', CompetitionId: this.gameId, Type: 'Delegation', PointTypeCode: this.pointTypeCode, CategoryIds: pointCategoryId }).then(res => {
            that.downloadPointLoading = false;
          }).catch(error => {
            that.downloadPointLoading = false;
            errorText(error).then(function(text) {
              that.$message({ type: 'error', message: text });
            });
          });
        } else {
          this.$message({ type: 'warning', message: '请选择项目级别！' });
          return;
        }
      } else {
        if (this.rankCategoryIds.length > 0) {
          this.downloadRankLoading = true;
          let rankCategoryId = '';
          for (let i = 0; i < this.rankCategoryIds.length; i++) {
            const item = this.rankCategoryIds[i];
            rankCategoryId = rankCategoryId + item;
            if (i !== this.rankCategoryIds.length - 1) {
              rankCategoryId = rankCategoryId + ',';
            }
          }
          const tempUrl = `/api/app/events-management/report`;
          const fileName = '名次公告' + '.pdf';
          api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: code, Format: 'PDF', CategoryId: rankCategoryId }).then(res => {
            that.downloadRankLoading = false;
          }).catch(error => {
            that.downloadRankLoading = false;
            errorText(error).then(function(text) {
              that.$message({ type: 'error', message: text });
            });
          });
        } else {
          this.$message({ type: 'warning', message: '请选择项目级别！' });
          return;
        }
      }
    },
    // 生成成绩列表
    downLoadResult(ResultList) {
      var that = this;
      this.downloadResultLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '项目EXCEL成绩列表' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: ResultList, CompetitionId: this.gameId }).then(res => {
        that.downloadResultLoading = false;
      }).catch(error => {
        that.downloadResultLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 生成积分表
    downLoadPoint(RankPrint) {
      var that = this;
      this.downloadRankPointLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '名次积分表' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: RankPrint, CompetitionId: this.gameId, PointTypeCode: this.pointTypeCode }).then(res => {
        that.downloadRankPointLoading = false;
      }).catch(error => {
        that.downloadRankPointLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 生成颁奖表
    downLoadAwardList(AwardList) {
      var that = this;
      this.downloadAwardListLoading = true;
      const tempUrl = `/api/app/events-management/report`;
      const fileName = '颁奖表' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: AwardList, Format: 'xlsx', CompetitionId: this.gameId }).then(res => {
        that.downloadAwardListLoading = false;
      }).catch(error => {
        that.downloadAwardListLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 全部名次表
    downLoadRanking(code) {
      var that = this;
      this.downloadRankingLoading = true;
      const tempUrl = `/api/app/events-management/report`;
      const fileName = '全部名次表' + '.xlsx';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: code, Format: 'xlsx', CompetitionId: this.gameId, TopRank: 9999 }).then(res => {
        that.downloadRankingLoading = false;
      }).catch(error => {
        that.downloadRankingLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    }
  }
};
</script>
<style scoped>
.report_box {
  border:1px solid #eee;
  padding: 0 15px;
}
.el-checkbox {
  text-align: right;
  width: 100%;
  padding-right: 10px;
}
.el-select /deep/ .el-select__tags {
  flex-wrap: unset;
  overflow: auto;
}
.el-select /deep/ .el-select__tags::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.el-select /deep/ .el-select__tags::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(24, 144, 255);
}
.el-select /deep/ .el-select__tags::-webkit-scrollbar-track {
  border-radius: 0;
  background: #ebeef5;
}
</style>
